@extends('layouts.header')
@section('content')
    <div class="page-container">
        <a id="submit" class="r mr-20 mb-10 btn btn-primary radius">确定</a>
        <table class="table table-border table-bordered table-hover table-bg" id="datatable">
            <thead>
            <tr class="text-c">
                <th>选择</th>
                <th>设备编号</th>
                <th>位置</th>
                <th>电量</th>
                <th>信号</th>
                <th>状态</th>
                <th>固件版本</th>
                <th>上次联网上报</th>
                <th>温度</th>
                <th>湿度</th>
                <th>大气压</th>
            </tr>
            </thead>
        </table>
    </div>

    <script type="text/javascript">
        var table;
        $(function () {
            $.fn.dataTable.ext.errMode = 'throw'; //datatable抛异常的方式，在console中输出，默认以alert的方式弹出
            table = $('#datatable').DataTable({
                "deferRender": true, //延迟渲染速度
                "ordering": false, // 是否排序
                "paging": false,
                "searching": false,
                ajax: "/{{config('constant.name_admin')}}/temHuiPre/index",
                "processing": true, //加载数据时候是否显示进度条
                language: {
                    url: '/admin/lib/datatables/dataTables_Chinese_Lang.json'
                },
                columns: [
                    {
                        data: null,
                        class: "text-c checkbox",
                        render:function (data) {
                           return '<input type="radio" name="dev-check"/>';
                        }
                    },
                    {
                        data: "dev_num",
                        class: "text-c node-num"
                    },
                    {
                        data: "pos",
                        class: "text-c"
                    },
                    {
                        data: "battery",
                        class: "text-c",
                        render: function (data, type, row, meta) {
                            var res = '';
                            if (data === '--') {
                                res = data;
                            } else {
                                if (data < 20) {
                                    res = '<span class="badge badge-danger radius">电量低</span> ';
                                }
                                res += data + '%'
                            }
                            return res;
                        }
                    },
                    {
                        data: "signal",
                        class: "text-c"
                    },
                    {
                        data: "status",
                        class: "text-c",
                        render: function (data, type, row, meta) {
                            var res = '';
                            if (data === '在线') {
                                res = '<span class="badge badge-success radius">在线</span>';
                            } else if (data === '离线') {
                                res = '<span class="badge badge-danger radius">离线</span>';
                            } else {
                                res = data;
                            }
                            return res;
                        }
                    },
                    {
                        data: "version",
                        class: "text-c"
                    },
                    {data: "last_time", class: "text-c"},
                    {data: "temp", class: "text-c temp"},
                    {data: "humi", class: "text-c humi"},
                    {data: "pressure", class: "text-c pressure"},
                ],
            });

            table.on('draw', function () {
                $("tbody tr").click(function () {
                    $(this).find('input[type=radio]').prop('checked','checked');
                });
            });

        });

        $('#submit').on('click',function () {
            let trObj = $('input:radio:checked').closest('tr');
            let params = {
                temp: trObj.find('.temp').text(),
                hum: trObj.find('.humi').text(),
                pressure: trObj.find('.pressure').text(),
            };
            ajax('post','',params,submitBak,0);
            function submitBak(res) {
                parent.location.reload();
            }
        })
    </script>
@endsection